@keyframes xjb-color-circle {
    0% {
      border-top-color: #f0acf7;
      border-bottom-color: white;
      border-left-color: #7093DB;
      border-right-color: #f7f0ac
    }
  
    25% {
      border-top-color: #7093DB;
      border-bottom-color: #f7f0ac;
      border-left-color: white;
      border-right-color: #f0acf7
    }
  
    50% {
      border-top-color: white;
      border-bottom-color: #f0acf7;
      border-left-color: #f7f0ac;
      border-right-color: #7093DB
    }
  
    75% {
      border-top-color: #f7f0ac;
      border-bottom-color: 7093DB;
      border-left-color: #f0acf7;
      border-right-color: white
    }
  
    100% {
      border-top-color: #f0acf7;
      border-bottom-color: white;
      border-left-color: #7093DB;
      border-right-color: #f7f0ac
    }
  }
  
  .xjb_color_circle {
    animation: xjb-color-circle 0.6s infinite linear
  }
  
  /*振荡动画*/
  @keyframes xjb_shake {
  
    10%,
    90% {
      transform: translate3d(-1px, 0, 0);
    }
  
    20%,
    80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%,
    50%,
    70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%,
    60% {
      transform: translate3d(4px, 0, 0);
    }
  }
  
  .xjb_animation_shake {
    animation: xjb_shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }
  
  .xjb-shake {
    animation: xjb_shake 0.5s infinite linear
  }
  
  /*旋转动画*/
  @keyframes xjb_tran {
    0% {
      transform: rotateY(0deg)
    }
  
    50% {
      transform: rotateY(180deg)
    }
  
    100% {
      transform: rotateY(360deg)
    }
  }
  
  @keyframes xjb_tranB {
  
    0%,
    100% {
      background-size: 23px 23px;
      opacity: 0;
      transform: rotateY(0deg);
    }
  
    25%,
    90% {
      background-size: 36px 36px;
      opacity: 0.3;
      transform: rotateY(180deg)
    }
  
    50%,
    75% {
      background-size: 50px 50px;
      opacity: 0;
      transform: rotateY(360deg)
    }
  }